<template>
  <van-popup :value="value" @input="$emit('input', $event)">
    <van-cell-group v-if="!isReport">
      <van-cell icon="closed-eye" @click="delDisLikes">不感兴趣</van-cell>
      <van-cell is-link @click="isReport = true">反馈垃圾内容</van-cell>
      <van-cell icon="info-o">拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell>
      <van-cell v-for="item in reports" :key="item.value" @click="reportsArtList(item.value)">{{item.label}}</van-cell>
    </van-cell-group>
  </van-popup>
</template>

<script>
// 导入封装的对文章不感兴趣的接口
import { disLikes, reportArticle } from '@/api/article'
// 使用数据渲染举报类型
import { reports } from '../../../utils/dataConfig'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    articleId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isReport: false, // 是否显示垃圾内容
      reports // 渲染举报类型的数据
    }
  },
  methods: {
    // 给按钮注册点击事件。发送接口请求
    async delDisLikes () {
      const { status } = await disLikes(this.articleId)
      // 当返回的状态码为201的时候，那么表示接口发送成功
      if (status === 201) {
        // 提示
        this.$toast.success('操作成功')
        // 关闭弹层
        this.$emit('input', false)
        // 通知父组件删除当前文章,注册自定义事件
        this.$emit('on-dislike')
      }
    },
    // 举报类型注册点击事件，点击那一项就删除那一项。需要传入文章id和举报类型(type)
    async reportsArtList (type) {
      try {
        // 发送接口数据
        const { status } = await reportArticle(this.articleId, type)
        if (status === 201) {
          // 提示
          this.$toast.success('举报成功')
          // 关闭弹层
          this.$emit('input', false)
          // 通知父组件删除当前文章,注册自定义事件
          this.$emit('on-dislike')
        }
      } catch (error) {
        if (error.response.status === 409) {
          // 提示
          return this.$toast.fail('已经举报过了')
        }
        this.$toast.fail('举报失败！')
        // 关闭弹层
        this.$emit('input', false)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
